<template>
  <div class="package">
    <card :msgNum="msgNum"></card>
    <!-- <div class="package-table">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        @change="changeDate"
      ></el-date-picker>
    </div> -->

    <!-- <el-table
      :data="tableData"
      :header-cell-style="headerCellStyle"
      style="width: 100%"
    >
      <el-table-column prop="msgName" label="短信名称"></el-table-column>
      <el-table-column prop="time" label="购买时间"></el-table-column>
    </el-table> -->
  </div>
</template>

<script>
import card from "./card.vue";
import { getSmsInfo } from "@/api/msg-package";
export default {
  name: "Package",
  components: {
    card
  },
  props: {
    site_key: {
      type: Number,
      default() {
        return null;
      }
    },
    js_ticket: {
      type: String,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      dateRange: [new Date(), new Date()],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      headerCellStyle: {
        background: "#f7f8fa",
        height: "40px"
      },
      msgNum: 0
      // tableData: []
    };
  },
  methods: {
    getSmsInfo() {
      let params = {
        js_ticket: this.js_ticket,
        site_key: this.site_key
      };
      getSmsInfo(params).then(res => {
        console.log(res);
        this.msgNum = res.sms_count;
      });
    },
    changeDate() {
      this.time = [
        parseInt(new Date(this.dateRange[0]).getTime() / 1000),
        parseInt(new Date(this.dateRange[1]).getTime() / 1000)
      ];
      this.getSmsInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
.package {
  .el-card {
    margin-bottom: 30px;
    .card-item {
      line-height: 32px;
    }
  }
}

.el-select {
  margin-right: 30px;
}
.package-table {
  margin-bottom: 30px;
}
</style>
